<template>
	<view class="main-box bg-white margin-tb-16" v-for="item in data" :key="item.title">
		<view class="title-w s-flex-r-s-c padding-left-32 height-90">
			<view class="line margin-right-16"></view>
			<text class="title s-fs-30">{{item.title}}</text>
		</view>
		<view class="list w100 s-flex-wrap s-flex-r-s-s padding-bottom-36">
			<view class="item width-250 s-flex-c-s-c padding-tb-24" v-for="e in item.list" :key="e.name" @click="nav(e)">
				<u-image :showLoading="false" loadingIcon="" class="icon" width="88rpx" height="88rpx" :src="`/static/img/${page}/${e.img}.png`"></u-image>
				<view class="name text-center s-fs-26 margin-top-20 line-height-42" :class="[e.width?`width-${e.width}`:'width-166']">
					{{e.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const prop=defineProps({
		page:{
			type:String,
			default:'do-tax'
		},
		data:{
			type:Array,
			default:()=>[]
		}
	})
	const nav=(item)=>{
		uni.navigateTo({
			url:item.path,
		})
	}
</script>

<style lang="scss">
.main-box{
	.title-w{
		border-bottom: 2rpx solid #EEEEEE;
		.line{
			width: 8rpx;
			height: 32rpx;
			background: #4486F6;
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			opacity: 1;
		}
		.title{
			color: #151316;
			font-weight: 500;
		}
	}
		.list{
			.name{
				font-size: 26rpx;
				color: #121214;
				line-height: 42rpx;
			}
		}
}
</style>